Angular8を使って爆速でPWAを作成する
Angularはアップデートが盛んでワクワクしますね！
v8からめちゃめちゃ簡単にAngularアプリをPWA化できるようになったので試してみたいと思います。
Angular8のアップデート内容はこちらの記事でまとめられているので、参考にしてください。
Angular v8がリリースされました！バンドルサイズ削減され、新レンダリングエンジンIvyのプレビュー版が利用可能に！
PWAのメリット
PWA（Progressive Web Apps）
- インストール不要
- webプッシュ通知（Androidのみ）
- オフラインでの動作
- ネイティブアプリに近いUI
これによりUXを向上させることが期待できます！
また、PWA未対応のブラウザであっても、webアプリとしての動作は可能です。
ストアに上げる必要も無いのでアップデートの度に審査を通す必要もなく、開発の自由度も上がりますね。
PWA化に必要な作業
- Service Workerの追加
- manifest.jsonの追加
-
Firebaseの設定（プッシュ通知をする場合）
環境
Angular CLI: 8.3.2 Node: 10.16.3 OS: linux x64 Angular: ... Package Version ------------------------------------------------------ @angular-devkit/architect 0.803.2 @angular-devkit/core 8.3.2 @angular-devkit/schematics 8.3.2 @schematics/angular 8.3.2 @schematics/update 0.803.2 rxjs 6.4.0
やってみる
プロジェクト作成
$ ng new angular-pwa ? Would you like to add Angular routing? Yes ? Which stylesheet format would you like to use? CSS
パッケージ追加
ng add @angular/pwa --project angular-pwa
実行すると、以下の操作を行います。
@angular/service-workerの追加- CLIでService Workerのビルドサポートを有効化
- アプリケーションモジュールにService Workerをインポー
index.htmlの更新manifest.webmanifestリンクの追加theme=colorのメタタグを追加
これだけでPWAになってます。
App shellの生成
パフォーマンスを上げるためにApp shellを生成します。
これもngコマンドで実行できます。
$ ng generate app-shell --client-project angular-pwa --universal-project angular-pwa
実行すると、 angular.json が更新されて server と app-shell の列が追加されます。
ビルド
ng run angular-pwa:app-shell
dist配下に {project-name}-server のディレクトリが作成されています。
動作確認
$ http-server -p 8080 -c-1 dist/angular-pwa
今回作成したものはこちらです。
デフォルトのwelcomeページですが、スマホで動作を確認してみて下さい。
